<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .tab{width:400px;height: 300px;border: solid 1px black;margin: 0 auto;}
    .tab ul{padding: 0;margin: 0;list-style: none;display: flex;background: #ccc;text-align: center;height: 30px;line-height: 30px;}
    .tab ul li{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;cursor: pointer;}
    .tab ul li.active{background: red;color: #fff;}

    .tab .cont>div{height: 270px;display: none;}
    .tab .cont .cont1{background-color: #399;}
    .tab .cont .cont2{background-color: #393;}
    .tab .cont .cont3{background-color: #993;}
    .tab .cont .cont4{background-color: #939;}
    .tab .cont>div.active{display: block;}
  </style>
</head>
<body>
  <div class="tab">
    <ul>
      <li>手机号登录</li>
      <li>账号密码登录</li>
      <li>二维码登录</li>
      <li>人脸登录</li>
    </ul>
    <div class="cont">
      <div class="cont1">这是用户名密码登录细节</div>
      <div class="cont2">这是手机号登录细节</div>
      <div class="cont3">这是二维码登录细节</div>
      <div class="cont4">这是人脸登录细节</div>
    </div>
  </div>
</body>
<script>

  var lis = document.querySelectorAll(".tab ul li");
  var conts = document.querySelectorAll(".tab .cont>div");

  // 默认显示项的索引
  var index = 0;
  lis[index].classList.add("active");
  conts[index].classList.add("active");

  for(var i=0;i<lis.length;i++){
    // 在还能拿到循环计数器的时候，给每个元素都绑定一个自定义属性，用来作为当前元素的索引
    // console.log(i)
    // console.log(lis[i])
    lis[i].xuhao = i;

    lis[i].onclick = function(){
      lis[index].classList.remove("active");
      conts[index].classList.remove("active");
      // 给当前点击的按钮，添加高亮
      this.classList.add("active");
      // 给当前点击的按钮索引对应的内容，添加显示
      conts[this.xuhao].classList.add("active");

      // 查看当前元素的索引
      // console.log(this.xuhao);

      // 将本次点击的按钮的索引，设置成下次要清除的索引
      index = this.xuhao;
    }
  }



  
</script>
</html>